<template>
  <div class="com">
    <button @click="onChangeNum(-1)" :disabled="disabled">-</button>
    <!-- prop 数据只能用不能改 -->
    <!-- <input type="text" v-model="value"> -->
    <input
      type="text"
      :value="value"
      @input="onInput"
      @blur="$emit('blur', $event)"
      :placeholder="placeholder"
      :disabled="disabled"
    >
    <button @click="onChangeNum(1)" :disabled="disabled">+</button>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    value: {
      type: Number,
      required: true // 必填项
    },
    min: {
      type: Number,
      default: 5 // 默认值
    },
    max: {
      type: Number
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },

    // 引用类型的默认值必须这么写
    obj: {
      type: Object,
      default () {
        // 这里 return 的这个对象就是默认值
        return {
          // 默认数据
        }
      }
    },

    arr: {
      type: Array,
      default () {
        // 这里 return 的这个数组就是默认值
        return [
          // 数据
        ]
      }
    },

    // 也可以自定义验证函数（了解即可）
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {
    // 实例中的数据都可以被监视
    value (currentValue, oldValue) {
      // 发布自定义事件
      this.$emit('change', currentValue, oldValue)
    }
  },
  created () {},
  methods: {
    // 当点击+、- 的时候触发调用的函数
    onChangeNum (number) {
      // this.value 就是父组件的 num
      let ret = this.value + number

      if (ret <= this.min) {
        ret = this.min
      }

      if (ret >= this.max) {
        ret = this.max
      }

      this.$emit('input', ret)
    },

    // 当文本框输入数据的时候触发的函数
    onInput (e) {
      const value = Number.parseInt(e.target.value)
      if (value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

<style scoped></style>
